import React from 'react'
import { IndexBar, List } from 'antd-mobile'
import {cityList} from '../../../public/cities.json'
import { useNavigate } from 'react-router-dom'
function City() {
    const navigate = useNavigate()
  return (
    <div style={{width: '100%', height: '100vh'}}>
       <div style={{ height: window.innerHeight }}>
      <IndexBar>
        {cityList.map(group => {
          const { title, citys } = group
          return (
            <IndexBar.Panel
              index={title}
              title={title}
              key={title}
            >
              <List>
                {citys.map((item, index) => (
                  <List.Item key={index} onClick={() => {
                    navigate('/home?city='+item.name)
                  }}>{item.name}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })}
      </IndexBar>
    </div>
    </div>
  )
}

export default City
